<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .wrong{
            border:2px solid #f00;
        }
        .right{
            border:2px solid #0f0;
        }
    </style>
</head>
<body>
账号：<input type="text" onblur="fn(this)"><br><br>
密码：<input type="password" onblur="fn(this)">
<script>
    //逝去焦点的时候判断input按钮的值，在6-12个字符之间通过，否则报错
    //1.获取事件源
    //2.绑定事件
    //3.书写事件驱动程序
    function fn(aaa){
        //html中调用input标签行内调用function（）,script是先通过window调用的function，所以console(this)打印的是window
        //只有传递的this才指的是标签本身
        if(aaa.value.length<6||aaa.value.length>12){
            aaa.className="wrong";
        }else{
            aaa.className="right";
        }

    }
    </script>
</body>
</html>